﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue1.0.7-懒加载</title>
		<link rel="stylesheet" href="css/base.css" />
		<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
		<script type="text/javascript" src="js/vue1.0.7.js" ></script>
		<style type="text/css">
		* {
			padding: 0;
			margin: 0;
			text-decoration: none;
			list-style: none;
		}
		.layout {
			margin: 0 auto;
			width: 1000px;
		}
		.lazyload img {
			width: 300px;
			height: 400px;
		}
		.img-ct {
			margin-left: -50px;
			overflow: auto;
		}
		.item {
			float: left;
			margin-left: 50px;
			margin-bottom: 30px;
		}
		ul li{border:1px solid red;}
	</style>
	</head>
	<body>
		<div id="app">
			<div class="ht30 bgred" v-on:click="test">1231</div>
			<div class="lazyload">
				<div class="layout">
					<ul class="img-ct">
						<!--当前版本 使用 自定义指令会有问题，建议使用组建v-ref:lists  v-for="a in lists" -->
						<yh v-ref:lists v-for="list in lists"  v-bind:lists="list" v-bind:nihao="list.isLoaded" v-bind:dataimg="list.dataimg" v-bind:myimg="list.myimg"></yh>
					</ul>
				</div>
		 	</div>
		</div>
	<script>
	    /**
	     * value :绑定的dom对象 以及 其属性
	     * el:绑定的元素
	     * JSON.stringify(this.modifiers)
	     */
	   Vue.component('yh',{
	   		template:'\
	   		<li class="item">\
	   			<a href="javascript:void(0)">\
	   				<img  v-bind:isload="nihao" v-bind:data-img="dataimg" v-bind:src="myimg">\
	   				</a>\
	   				</li>\
	   		',
	   		props:['lists','nihao','dataimg','myimg'],
	   		
	   })
	    
		var vm= new Vue({
			el:'#app',
			data:{
				message:'wocao',
				lists:[],
				elements:[],
				tealists:[{text:'123'},{text:'456'}]
			},
			methods:{
				test:function(){
					sessionStorage.setItem("cacheteacherlist", JSON.stringify(vm.$data));
					var timestamp = Date.parse(new Date());
					window.location.href = "index4.html?r="+timestamp
				},
				/**
				 * 定时器循环调用checkshow 方法
				 */
				begin:function(){
					var clock;
					  if(clock) {
							clearTimeout(clock);
						}
						clock =setTimeout(function(){
							vm.checkShow();
						},200)
					
				},
				/**
				 * 获取当前元素的标签，如果为isLoaded=true停止 如果不是 判断 当前是否应该展示（是否在可shi窗口内）,  在的话将他的属性和另一个属性替换
				 */
				checkShow:function(){
					for(var m=0;m<vm.lists.length;m++){
						if(vm.lists[m].isLoaded){
							continue;
						}
						if(vm.shouldShow(m))
						{
							vm.showimg(m)
						}
					}
				},
				/**
				 * 当前方法 进行 data-img 属性和src 属性值的替换
				 * @param {Object} i 循环图片
				 */
				showimg:function(i){
					vm.lists[i].myimg=vm.lists[i].dataimg
					vm.lists[i].isLoaded=true
				},
				/**
				 * 当前方法  是否图片出现在可见区域
				 * scrollH 滚动高度
				 * winH 当前窗口高度
				 * top  当前元素距离文档的高度
				 * top <winH+ scrollH 图片在可见区域内
				 * @param {Object} index
				 */
				shouldShow:function(index){
					var scrollH=$(window).scrollTop();
					var winH=$(window).height();
					/*console.log(this.$els.load)*/
					
					var top =vm.$refs.lists[index].$el.offsetTop
					if(top< winH+scrollH){
						console.log("满足条件的索引="+index+"滚动距离="+scrollH+"高度="+winH+"top="+top)
						return true
					}
					else{
						return false
					}
				}
			},
			/**
			 * 当前为mouted钩子函数，ready 之前 可以进行获取ajax 操作 ,调用begin 方法需要用this-------------加深理解
			 */
			ready:function(){
/*				this.tealists[0].haipa.style.color='red'
				console.log(this.tealists[0].haipa.offsetTop)*/
				window.addEventListener('scroll', this.begin)
				getinit(this.$data)
				/*for(var i=0;i<14;i++){
				var list={
					isLoaded:false,
					dataimg:"img/Tsingtao.jpeg",
					myimg:"img/blank.jpg",
				}
				this.$data.lists.push(list)
				}*/
			},
		})
		// 文件加载后执行的方法
		function getinit(thisvm){
			for(var i=0;i<14;i++){
				var list={
					isLoaded:false,
					dataimg:"img/Tsingtao.jpeg",
					myimg:"img/blank.jpg",
				}
				thisvm.lists.push(list)
			}
		}
		window.onload =function(){
			vm.begin();
		}
		</script>
	</body>
</html>
